<!DOCTYPE html>
<html>
<head>
  <style>
    style {
      display: block;
      white-space: pre-wrap;
      background-color: #f5f5f5;
    }
    section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      grid-gap: 1em;
    }
  </style>
</head>

<body>
  

  <h1>棋盘网格</h1>
  <section>
    <div class="ex-area">
      <div class="grid-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
        <div class="item8">8</div>
        <div class="item9">9</div>
        <div class="item10">10</div>
        <div class="item11">11</div>
        <div class="item12">12</div>
        <div class="item13">13</div>
      </div>
    </div>
    <!-- 时时样式编辑区 -->
    <div class="code-area">
      <style contenteditable>
        .grid-container {
          width: 300px;
          height: 300px;
          display: grid;
          grid-template-columns: repeat(3, 33%);
          grid-template-rows: repeat(5, 33%);
          grid-gap: .33%;
          border: 3px solid;
          overflow: auto;
          resize: both;
        }
    
        .grid-container > div {
          display: grid;
          place-items: center;
          background-color: rgba(64, 138, 250, 0.5);
          font-size: 30px;
        }
    
      </style>
    </div>
  </section>

</body>

</html>